<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="close">
        <el-form ref="form" :model="form" label-width="90px">
            <el-tree ref="tree" :check-strictly="checkStrictly" :data="menusData" :props="defaultProps"
                     @check="currentChecked"
                     show-checkbox node-key="menu_id" class="permission-tree"/>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="danger" @click="close">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>

    export default {
        name: 'AdminRoleMenu',
        data() {
            return {
                form: {
                    menu_ids: []
                },
                title: '',
                dialogFormVisible: false,
                menusData: [],
                defaultProps: {
                    children: 'children',
                    label: 'menu_name'
                },
                checkStrictly: false,
            }
        },
        created() {
            // 获取菜单列表
            // this.getRolesSelect();
        },
        methods: {
            currentChecked(nodeObj, SelectedObj) {
                console.log(SelectedObj)
                console.log(' 这是选中的节点的key数组')
                console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
                console.log('这是选中的节点数组')   // 这是选中的节点的key数组
                console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
                this.form.menu_ids  = SelectedObj.checkedKeys
            },
            generateArr(menus) {
                console.log('generateArr')
                console.log(menus)
                let data = [];
                menus.forEach(menu => {
                    data.push(menu);
                    if (menu._child) {
                        const temp = this.generateArr(menu.children);
                        if (temp.length > 0) {
                            data = [...data, ...temp];
                        }
                    }
                });
                return data;
            },

            //获取上级菜单
            async getRolesSelect(parent_id) {
                const {data} = await this.$get(this.$api.adminRoles+this.$api.getSelectLists,{type: 2, role_id: parent_id});
                console.log('role_list')
                this.menusData = data
            },
            showRole(row, menuList) {
                const detail = Object.assign({}, row);
                this.title = "分配权限-" + detail.role_name;
                this.form=detail
                if (detail.parent_id == 0 ){
                    this.menusData = menuList
                } else {
                    this.getRolesSelect(detail.parent_id)
                }
                this.generateArr(detail.menus)
                this.dialogFormVisible = true
                this.$refs.tree.setCheckedKeys([1, 4, 2])

            },
            close() {
                this.$refs['form'].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs['form'].validate(async (valid) => {
                    console.log(this.form)
                    if (valid) {
                        const {msg, status} =  await this.$put(this.$api.adminRoles+this.$api.update,this.form)
                        this.$message({
                            message: msg,
                            type: status == 1 ? 'success' : 'error',
                        });
                        this.$emit('fetchData');
                        this.close();
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>


<style scoped>
    .el-form-item > labe {
        width: 100px;
    }

    label.el-checkbox {
        display: block;
    }

    #img-btn {
        position: absolute;
        bottom: 15px;
        margin-left: 40px;
    }
</style>
